How To Add Email Subscription Popup For Blogger Website With HTML Code

Email subscription popup to your Blogger website using only HTML/CSS/JavaScript can be done by using a custom code snippet. However, the most robust and easiest method for a Blogger site is typically to use a dedicated email marketing service or a popup builder tool that provides a ready-made embed code.

HTML/CSS/JavaScript method for a standalone popup, often using FeedBurner (Google's service) or a similar service to handle the actual subscription.

⮞ Method 1: Custom HTML/CSS/JS Popup (Advanced) :

This method involves adding the HTML structure, CSS styling for the popup, and JavaScript for the display/timing logic directly to your Blogger template.

Step 1: Get Your Subscription Form Action URL

You need an existing email subscription service, such as FeedBurner, to handle collecting and managing the email addresses.

If using FeedBurner: Go to your FeedBurner dashboard, navigate to the Publicize tab, then Email Subscriptions. Copy the form's action URL from the provided HTML code snippet. This URL is where the form data will be submitted.

If using another service (e.g., Mailchimp, ConvertKit): Create a simple form and get the form action URL and any necessary hidden input fields.

Step 2: Add the Code to Blogger

You will modify your Blogger theme's HTML to include the popup's structure, styling, and script.

Go to your Blogger Dashboard.

Navigate to Theme (or Template).

Click the "Edit HTML" button.

Step 3: Add CSS for Styling

Paste the CSS code just before the closing </b:skin> or ]]></b:skin> tag. This code styles the popup box, overlay, and close button.

Note: The following is a basic example. You will need to adjust the styles (width, background-color, position, etc.) to match your site's design.

/* Basic CSS for the Popup and Overlay */

#email-popup-overlay {

display: none; /* Starts hidden */

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.8); /* Dark overlay */

z-index: 9999;

align-items: center;

justify-content: center;

}

#email-popup-box {

background: #fff;

padding: 30px;

border-radius: 8px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

max-width: 400px;

text-align: center;

position: relative;

}

#popup-close-btn {

position: absolute;

top: 10px;

right: 10px;

font-size: 20px;

font-weight: bold;

color: #333;

cursor: pointer;

border: none;

background: transparent;

}

Step 4: Add HTML and JavaScript for Functionality

Paste the combined HTML and JavaScript code right before the closing </body> tag.
Crucial: You must replace the placeholder values (like YOUR_FORM_ACTION_URL and YOUR_FEEDBURNER_URI) with your actual service-provided links.

<h3>Subscribe to Our Newsletter!</h3>

<p>Never miss a post. Get the latest updates delivered straight to your inbox.</p>

<form action='YOUR_FORM_ACTION_URL' method='post' target='popupwindow'

onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR_FEEDBURNER_URI', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true">

</form>

</div>

// Set the delay (in milliseconds) before the popup appears

var POPUP_DELAY = 5000; // 5 seconds

// Get the popup elements

var overlay = document.getElementById('email-popup-overlay');

var closeBtn = document.getElementById('popup-close-btn');

// Function to show the popup

function showPopup() {

// Check if a cookie exists to prevent showing it too often

if (document.cookie.indexOf('email_popup_shown=true') === -1) {

overlay.style.display = 'flex';

}

// Function to hide the popup and set a cookie

function hidePopup() {

overlay.style.display = 'none';

// Set a cookie to prevent showing the popup again for, say, 7 days

var date = new Date();

date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days

document.cookie = 'email_popup_shown=true; expires=' + date.toUTCString() + '; path=/';

}

// Event listener for the close button

closeBtn.addEventListener('click', hidePopup);

// Show the popup after a delay

setTimeout(showPopup, POPUP_DELAY);

// Hide the popup when clicking the overlay (outside the box)

overlay.addEventListener('click', function(e) {

if (e.target.id === 'email-popup-overlay') {

hidePopup();

}

});

</script>

Step 5: Save and Test

Click "Save theme".

Go to your blog and wait for the specified delay (POPUP_DELAY) to see the popup appear.

⮞ Method 2: Use a Dedicated Tool (Recommended) :

The easiest and most feature-rich approach is to use a free email marketing service or a popup builder (like Mailchimp, Elfsight, or Popupsmart) that offers a simple, pre-built embed code.

Sign Up for a service (e.g., Mailchimp or a dedicated popup tool).

Design your email subscription popup using their drag-and-drop editor. This lets you customize the design, timing (e.g., exit intent, after 10 seconds), and targeting without writing code.

The service will provide you with a single HTML/JavaScript snippet.

In Blogger, go to Layout > Add a Gadget (usually in the footer or sidebar, though the code is site-wide) > choose HTML/JavaScript.

Paste the provided embed code into the Content box and Save.

This approach handles complex JavaScript functions, like setting cookies to prevent repeat showings and responsive design, much more reliably than a purely custom solution.